<template>
	<view class="payments_wrap">
		<view class="orders">
			<view>
				<view>订单</view>
				<view>{{ orderCount }}</view>
			</view>
			<view class="separate"></view>
			<view>
				<view>总额</view>
				<view>￥{{ totalPrice }}</view>
			</view>
		</view>
		<view class="time_choose">
			<picker mode="date" :value="date" fields="month" start="2021-1" :end="endDate" @change="bindDateChange">
				<view>{{ date }}</view>
			</picker>
			<picker mode="date" :value="date" fields="month" start="2021-1" :end="endDate" @change="bindDateChange">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/agencies/arrow_list.png"
					mode=""></image>
			</picker>
		</view>
		<u-empty-state v-if="records.length == 0" value="暂无相关记录"></u-empty-state>
		<u-settlement v-for="(item, index) in records" :key="index" :item="item" title="已发货"></u-settlement>

	</view>
</template>

<script>
import uSettlement from '../components/u-settlement/u-settlement.vue'
export default {
	components: {
		uSettlement
	},
	onShow() {
		this.getClearingLise()
	},
	onReachBottom() {
		if (this.pageNo * 10 < this.total) {
			this.pageNo++
			this.getOrdersLise()
		}
	},
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			orderCount: 0,  //订单数量
			totalPrice: '',   //订单金额
			records: [],  //订单列表
			date: currentDate,  //年-月
			endDate: currentDate,  //最高年-月
			pageNo: 1,
			total: 0,
		};
	},
	methods: {
		getClearingLise() {
			this.$api.getClearingLise({
				params: {
					month: this.date.slice(0, -3) + this.date.slice(-2),
					pageSize: 10,
					pageNo: this.pageNo
				}
			}).then(e => {
				const {
					code,
					result: {
						page: {
							records,
							total
						},
						orderCount,
						totalPrice
					}
				} = e
				if (code == 200) {
					this.orderCount = orderCount;
					this.totalPrice = totalPrice;
					this.total = total
					this.records.push.apply(this.records, records);
				} else {
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: 'none'
				});
			})
		},
		bindDateChange(e) {
			this.date = e.detail.value
			this.pageNo = 1
			this.records = []
			this.getClearingLise()
		},
		getDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			month = month > 9 ? month : '0' + month;
			return `${year}-${month}`;
		}
	}
}
</script>

<style lang="less">
@import './clearing.less';
</style>
